<!DOCTYPE html>
<html>
<head>
    <title>Project 5</title>
    <script src="d3.js" charset="utf-8"></script>
    <style>
        body,html{
            margin: 0;
            padding: 0;
            width: calc(100%);
            height: calc(100%);
        }
        .top-tittle{
            font-family: "黑体", "SimHei", "STHeiti", "Microsoft YaHei", sans-serif;
            font-weight: bold;
            font-size: 22px;
            color: black;
            position: absolute;
            top: 40px;
            left: calc(50%);
            transform: translate(-50%,-50%);
        }
        svg {
            font-family: Arial, sans-serif;
            border: 1px solid lightgrey;
         }
        .svgchart1{
            position: absolute;
            top: calc(9%);
            left: 0;
            width: calc(25%);
            height: calc(56%);
         }
        .svgchart2{
            position: absolute;
            top: calc(9%);
            left: calc(25%);
            width: calc(35%);
            height: calc(56%);
         }
        .svgchart3{
            position: absolute;
            top: calc(9%);
            right: 0;
            width: calc(40%);
            height: calc(56%);
         }
        .svgchart4{
            position: absolute;
            left: 0;
            right: 0;
            width: calc(99.8%);
            top: calc(65%);
            height: calc(34%);
         }
        #options1{
            position: absolute;
            top: calc(68%);
            left: 20px;
            width: auto;
            background-color: #f2f2f2;
            border: 1px solid #ccc;
            outline: none;
            border-radius: 8px;
            padding: 3px;
            font-family: Arial, sans-serif;
            color: #333;
            font-size: 14px;
        }
        #options2{
            position: absolute;
            top: calc(68%);
            left: 110px;
            width: auto;
            background-color: #f2f2f2;
            border: 1px solid #ccc;
            outline: none;
            border-radius: 8px;
            padding: 3px;
            font-family: Arial, sans-serif;
            color: #333;
            font-size: 14px;
        }
        #options3{
            position: absolute;
            top: calc(68%);
            left: 210px;
            width: auto;
            background-color: #f2f2f2;
            border: 1px solid #ccc;
            outline: none;
            border-radius: 8px;
            padding: 3px;
            font-family: Arial, sans-serif;
            color: #333;
            font-size: 14px;
        }
        #to{
            position: absolute;
            top: calc(68.6%);
            left: 190px;
            font-size: 16px;
        }
        #divrate{
            position: absolute;
            top: calc(87.4%);
            left: 40px;
            font-family: Arial, sans-serif;
            font-size: 14px;
            font-weight: lighter;
        }
        .tooltip_c4 {
            font-family: Arial, sans-serif;
            font-size: 14px;
            font-weight: lighter;
        }
        #checkbox-develop {
            position: absolute;
            top:calc(90.2%);
            left: 18px;
        }
        #checkbox-sale {
            position: absolute;
            top:calc(93.3%);
            left: 18px;
        }
        #checkbox-rate{
            position: absolute;
            top: calc(87.1%);
            left: 18px;
        }
        .labeldot_c4{
            font-family: Arial, sans-serif;
            font-size: 12px;
            font-weight: lighter;
            fill: #333;
        }
    </style>
</head>

<body>
    <div class="top-tittle">中国城镇化研究</div>
    <svg id="chart1" class="svgchart1"></svg>
    <svg id="chart2" class="svgchart2"></svg>
    <svg id="chart3" class="svgchart3"></svg>
    <svg id="chart4" class="svgchart4"></svg>

    <!--   -chart1-->

    <!--   -chart2-->

    <!--   -chart3-->

    <!--wyy-chart4-->
    <select id="options1">
        <option value="country_areadata">全国</option>
        <option value="beijing_areadata">北京</option>
        <option value="tianjin_areadata">天津</option>
        <option value="hebei_areadata">河北</option> 
        <option value="shan1xi_areadata">山西</option> 
        <option value="neimenggu_areadata">内蒙古</option> 
        <option value="liaoning_areadata">辽宁</option> 
        <option value="jilin_areadata">吉林</option> 
        <option value="heilongjiang_areadata">黑龙江</option> 
        <option value="shanghai_areadata">上海</option> 
        <option value="jiangsu_areadata">江苏</option> 
        <option value="zhejiang_areadata">浙江</option> 
        <option value="anhui_areadata">安徽</option>
        <option value="fujian_areadata">福建</option> 
        <option value="jiangxi_areadata">江西</option> 
        <option value="shandong_areadata">山东</option> 
        <option value="henan_areadata">河南</option> 
        <option value="hubei_areadata">湖北</option> 
        <option value="hunan_areadata">湖南</option> 
        <option value="guangdong_areadata">广东</option> 
        <option value="guangxi_areadata">广西</option> 
        <option value="hainan_areadata">海南</option> 
        <option value="chongqing_areadata">重庆</option> 
        <option value="sichuan_areadata">四川</option> 
        <option value="guizhou_areadata">贵州</option>
        <option value="yunnan_areadata">云南</option> 
        <option value="xizang_areadata">西藏</option> 
        <option value="shan3xi_areadata">陕西</option> 
        <option value="gansu_areadata">甘肃</option> 
        <option value="qinghai_areadata">青海</option> 
        <option value="ningxia_areadata">宁夏</option> 
        <option value="xinjiang_areadata">新疆</option> 
    </select>
    <select id="options2">
        <option value="2003">2003年</option>
        <option value="2004">2004年</option>
        <option value="2005">2005年</option>
        <option value="2006">2006年</option>
        <option value="2007">2007年</option>
        <option value="2008">2008年</option>
        <option value="2009">2009年</option>
        <option value="2010">2010年</option>
        <option value="2011">2011年</option>
        <option value="2012">2012年</option>
        <option value="2013">2013年</option>
        <option value="2014">2014年</option>
        <option value="2015">2015年</option>
        <option value="2016">2016年</option>
        <option value="2017">2017年</option>
        <option value="2018">2018年</option>
        <option value="2019">2019年</option>
        <option value="2020">2020年</option>
        <option value="2021">2021年</option>
        <option value="2022">2022年</option>
    </select>
    <select id="options3">
        <option value="2022">2022年</option>
        <option value="2021">2021年</option>
        <option value="2020">2020年</option>
        <option value="2019">2019年</option>
        <option value="2018">2018年</option>
        <option value="2017">2017年</option>
        <option value="2016">2016年</option>
        <option value="2015">2015年</option>
        <option value="2014">2014年</option>
        <option value="2013">2013年</option>
        <option value="2012">2012年</option>
        <option value="2011">2011年</option>
        <option value="2010">2010年</option>
        <option value="2009">2009年</option>
        <option value="2008">2008年</option>
        <option value="2007">2007年</option>
        <option value="2006">2006年</option>
        <option value="2005">2005年</option>
        <option value="2004">2004年</option>
        <option value="2003">2003年</option>
    </select>
    <div id="to">到</div>
    <div id="divrate">显示城市化率折线(%)</div>
    <div>
        <input type="checkbox" id="checkbox-develop" onchange="toggleBars()" checked>
    </div>
    <div>
        <input type="checkbox" id="checkbox-sale" onchange="toggleBars()" checked>
    </div>
    <div>
        <input type="checkbox" id="checkbox-rate" onchange="draw_rateline()">
    </div>

    <script>
        var currentGraph=null;

        const country_areadata=[
            {year: '2003', develop: 54707.53, sale: 7955.66 ,rate: 40.53 },
            {year: '2004', develop: 60413.86, sale: 10375.71 ,rate: 41.76 },
            {year: '2005', develop: 68064.44, sale: 17576.13 ,rate: 42.99 },
            {year: '2006', develop: 79252.83, sale: 20825.96 ,rate: 44.34 },
            {year: '2007', develop: 95401.53, sale: 29889.12 ,rate: 45.89 },
            {year: '2008', develop: 102553.37, sale: 25068.18 ,rate: 46.99 },
            {year: '2009', develop: 116422.05, sale: 44355.17 ,rate: 48.34 },
            {year: '2010', develop: 163646.87, sale: 52572.11 ,rate: 49.95 },
            {year: '2011', develop: 191236.87, sale: 58302.60 ,rate: 51.83 },
            {year: '2012', develop: 177333.62, sale: 64020.59 ,rate: 53.10 },
            {year: '2013', develop: 201207.84, sale: 80531.21 ,rate: 54.49 },
            {year: '2014', develop: 179592.49, sale: 75377.21 ,rate: 55.75 },
            {year: '2015', develop: 154453.68, sale: 86010.17 ,rate: 57.33 },
            {year: '2016', develop: 166928.13, sale: 115425.65 ,rate: 58.84 },
            {year: '2017', develop: 178653.77, sale: 130874.14 ,rate: 60.24 },
            {year: '2018', develop: 209537.16, sale: 146129.88 ,rate: 61.50 },
            {year: '2019', develop: 227153.58, sale: 155801.67 ,rate: 62.71 },
            {year: '2020', develop: 224433.13, sale: 169069.01 ,rate: 63.89 },
            {year: '2021', develop: 198895.05, sale: 176945.57 ,rate: 64.72 },
            {year: '2022', develop: 120107.43, sale: 129655.57 ,rate: 65.22 }
        ]

        const beijing_areadata=[
            {year: '2003', develop: 3433.75, sale: 1895.8 ,rate: 83.10 },
            {year: '2004', develop: 3054.27, sale: 2472.03 ,rate: 83.42 },
            {year: '2005', develop: 2965.93, sale: 3123.42 ,rate: 83.62 },
            {year: '2006', develop: 3179.35, sale: 2607.62 ,rate: 84.32 },
            {year: '2007', develop: 2557.40, sale: 2176.57 ,rate: 84.49 },
            {year: '2008', develop: 2337.22, sale: 1335.37 ,rate: 84.92 },
            {year: '2009', develop: 2246.60, sale: 2362.25 ,rate: 85.00 },
            {year: '2010', develop: 2974.24, sale: 1639.53 ,rate: 85.93 },
            {year: '2011', develop: 4246.05, sale: 1439.2 ,rate: 86.22 },
            {year: '2012', develop: 3224.21, sale: 1943.74 ,rate: 86.28 },
            {year: '2013', develop: 3577.52, sale: 1903.11 ,rate: 86.40 },
            {year: '2014', develop: 2449.39, sale: 1454.19 ,rate: 86.50 },
            {year: '2015', develop: 2706.91, sale: 1554.25 ,rate: 86.70 },
            {year: '2016', develop: 2795.57, sale: 1658.93 ,rate: 86.74 },
            {year: '2017', develop: 2361.51, sale: 869.95 ,rate: 86.92 },
            {year: '2018', develop: 2321.11, sale: 696.19 ,rate: 87.09 },
            {year: '2019', develop: 2073.21, sale: 938.86 ,rate: 87.35 },
            {year: '2020', develop: 3006.62, sale: 970.88 ,rate: 87.53 },
            {year: '2021', develop: 1895.93, sale: 1107.07 ,rate: 87.53 },
            {year: '2022', develop: 1774.41, sale: 1039.98 ,rate: 87.59 }
        ]

        const tianjin_areadata=[
            {year: '2003', develop: 838.17, sale: 786.5, rate: 73.96  },
            {year: '2004', develop: 1216.58, sale: 847.03, rate: 74.25 },
            {year: '2005', develop: 1579.45, sale: 1408.37, rate: 75.07  },
            {year: '2006', develop: 1906.36, sale: 1458.6, rate: 75.72  },
            {year: '2007', develop: 2114.31, sale: 1548.59, rate: 76.32  },
            {year: '2008', develop: 2440.24, sale: 1252.04, rate: 77.21  },
            {year: '2009', develop: 2555.50, sale: 1590.02, rate: 78.01  },
            {year: '2010', develop: 2911.67, sale: 1514.52, rate: 79.60  },
            {year: '2011', develop: 3295.56, sale: 1594.57, rate: 80.46  },
            {year: '2012', develop: 2565.19, sale: 1661.69, rate: 81.57  },
            {year: '2013', develop: 2672.93, sale: 1847.11, rate: 82.27  },
            {year: '2014', develop: 2815.27, sale: 1612.98, rate: 82.58  },
            {year: '2015', develop: 2817.19, sale: 1771.07, rate: 82.90  },
            {year: '2016', develop: 2511.47, sale: 2711.08, rate: 83.30  },
            {year: '2017', develop: 2334.62, sale: 1482.12, rate: 83.55  },
            {year: '2018', develop: 2479.34, sale: 1249.87, rate: 83.95 },
            {year: '2019', develop: 2544.84, sale: 1478.68, rate: 84.33 },
            {year: '2020', develop: 2161.86, sale: 1306.96, rate: 84.72 },
            {year: '2021', develop: 1885.36, sale: 1435.42, rate: 84.85 },
            {year: '2022', develop: 667.20, sale: 973.77, rate: 85.11 }
        ]
       
        const hebei_areadata=[
            {year: '2003', develop: 1529.49, sale: 939.43, rate: 35.79},
            {year: '2004', develop: 1636.82, sale: 864.85, rate: 36.58},
            {year: '2005', develop: 1970.8, sale: 1408.74, rate: 37.69 },
            {year: '2006', develop: 2280.51, sale: 1817.94, rate: 38.76 },
            {year: '2007', develop: 2797.55, sale: 2067.79, rate: 40.26 },
            {year: '2008', develop: 3768.81, sale: 2231.84, rate: 41.89 },
            {year: '2009', develop: 6786, sale: 2966.61, rate: 43.74 },
            {year: '2010', develop: 9629.16, sale: 4662.1, rate: 44.50 },
            {year: '2011', develop: 11182.8, sale: 5888.33, rate: 45.59 },
            {year: '2012', develop: 7641.8, sale: 5144.92, rate: 46.60 },
            {year: '2013', develop: 6932.65, sale: 5675.95, rate: 48.02 },
            {year: '2014', develop: 8239.03, sale: 5706.19, rate: 49.37 },
            {year: '2015', develop: 7219.81, sale: 5854.65, rate: 51.67 },
            {year: '2016', develop: 8161.3, sale: 6682.29, rate: 53.87 },
            {year: '2017', develop: 8417.21, sale: 6425.91, rate: 55.74 },
            {year: '2018', develop: 8390.07, sale: 5251.93, rate: 57.33 },
            {year: '2019', develop: 9452.68, sale: 5282.7, rate: 58.78 },
            {year: '2020', develop: 10232.19, sale: 6028.41, rate: 60.08 },
            {year: '2021', develop: 9069.19, sale: 6133.15, rate: 61.14 },
            {year: '2022', develop: 5395.28, sale: 4615.74, rate: 61.66  }
        ]

        const shan1xi_areadata=[
            {year: '2003', develop: 685.33, sale: 359.60, rate:40.97 },
            {year: '2004', develop: 753.69, sale: 399.13, rate:41.56 },
            {year: '2005', develop: 1156.01, sale: 688.75, rate:42.12  },
            {year: '2006', develop: 1471.78, sale: 791.46, rate: 42.99 },
            {year: '2007', develop: 1228.3, sale: 913.55, rate:44.03  },
            {year: '2008', develop: 1414.75, sale: 994.71, rate:45.12  },
            {year: '2009', develop: 2444.06, sale: 1034.2, rate: 45.99 },
            {year: '2010', develop: 2782.05, sale: 1180.59, rate:48.04  },
            {year: '2011', develop: 2849.44, sale: 1284.78, rate:49.80  },
            {year: '2012', develop: 4166.34, sale: 1497.88, rate: 51.32 },
            {year: '2013', develop: 3673.34, sale: 1642.82, rate: 52.87 },
            {year: '2014', develop: 3887.51, sale: 1576.27, rate: 54.31 },
            {year: '2015', develop: 3700.64, sale: 1592.55, rate: 55.87 },
            {year: '2016', develop: 3854.78, sale: 2061.06, rate: 57.26 },
            {year: '2017', develop: 3305.84, sale: 2415.92, rate: 58.60 },
            {year: '2018', develop: 3872.55, sale: 2360.9, rate:59.85  },
            {year: '2019', develop: 4879.09, sale: 2366.11, rate: 61.28 },
            {year: '2020', develop: 5795.65, sale: 2685.29, rate: 62.52 },
            {year: '2021', develop: 4347.74, sale: 3204.41, rate: 63.42 },
            {year: '2022', develop: 3453.91, sale: 2256.71, rate: 63.95 }
        ]

        const neimenggu_areadata=[
            {year: '2003', develop: 795.91, sale: 547.97, rate: 45.84},
            {year: '2004', develop: 901.6, sale: 653.96, rate: 46.57},
            {year: '2005', develop: 1425.01, sale: 1078.8, rate:47.19  },
            {year: '2006', develop: 2556.02, sale: 1428.97, rate:48.65  },
            {year: '2007', develop: 3305.29, sale: 2087.67, rate: 50.14 },
            {year: '2008', develop: 3831.26, sale: 2396.37, rate:51.72  },
            {year: '2009', develop: 4387.6, sale: 2581.68, rate: 53.42 },
            {year: '2010', develop: 6270.34, sale: 3057.38, rate:55.50  },
            {year: '2011', develop: 8236.26, sale: 3509.09, rate: 57.04 },
            {year: '2012', develop: 5423.42, sale: 2523.52, rate: 58.40 },
            {year: '2013', develop: 5042.81, sale: 2737.7, rate: 59.84 },
            {year: '2014', develop: 3114, sale: 2457.18, rate:60.96  },
            {year: '2015', develop: 2341.67, sale: 2369.37, rate:62.09  },
            {year: '2016', develop: 2563.7, sale: 2527.85, rate:63.38  },
            {year: '2017', develop: 2359.7, sale: 2067.6, rate:64.61  },
            {year: '2018', develop: 3024.31, sale: 2007.67, rate: 65.52 },
            {year: '2019', develop: 3706.06, sale: 2008.19, rate:66.46  },
            {year: '2020', develop: 3287.84, sale: 2045.89, rate:67.50  },
            {year: '2021', develop: 2911.77, sale: 1858.95, rate:68.21  },
            {year: '2022', develop: 1629.07, sale: 1380.53, rate: 68.60 }
        ]

        const liaoning_areadata=[
            {year: '2003', develop: 2617.63, sale: 1499.08, rate:57.99 },
            {year: '2004', develop: 2938.61, sale: 1748.78, rate:58.37 },
            {year: '2005', develop: 3638.39, sale: 2564.48, rate:58.71  },
            {year: '2006', develop: 4495.71, sale: 3006.61, rate:58.98  },
            {year: '2007', develop: 6536.45, sale: 3830.43, rate:59.19  },
            {year: '2008', develop: 6761.89, sale: 4091.16, rate:60.05  },
            {year: '2009', develop: 8305.44, sale: 5375.52, rate: 60.35 },
            {year: '2010', develop: 12647.9, sale: 6800.45, rate:62.10  },
            {year: '2011', develop: 12444.28, sale: 7541.48, rate:64.06  },
            {year: '2012', develop: 13828.92, sale: 8827.95, rate: 65.65 },
            {year: '2013', develop: 13444.45, sale: 9292.33, rate: 66.46 },
            {year: '2014', develop: 8192.17, sale: 5754.81, rate: 67.05 },
            {year: '2015', develop: 4699.42, sale: 3916.19, rate: 68.05 },
            {year: '2016', develop: 3733.61, sale: 3711.9, rate: 68.87 },
            {year: '2017', develop: 3806.88, sale: 4148.45, rate:69.48  },
            {year: '2018', develop: 3961.71, sale: 3934.57, rate: 70.26 },
            {year: '2019', develop: 4142.51, sale: 3696.27, rate:71.22  },
            {year: '2020', develop: 4404.14, sale: 3743.16, rate: 72.15 },
            {year: '2021', develop: 4598.19, sale: 3433.87, rate: 72.81 },
            {year: '2022', develop: 2378.6, sale: 2182.47, rate:73.00  }
        ]

        const jilin_areadata=[
            {year: '2003', develop: 960.28, sale: 501.14, rate:51.61 },
            {year: '2004', develop: 1056.05, sale: 401.88, rate:51.99 },
            {year: '2005', develop: 1286.14, sale: 830.91, rate:52.50  },
            {year: '2006', develop: 2117.92, sale: 974.91, rate: 52.96 },
            {year: '2007', develop: 2932.8, sale: 1292.39, rate: 53.15 },
            {year: '2008', develop: 2923.76, sale: 1583.87, rate:53.22  },
            {year: '2009', develop: 3262.45, sale: 1944.3, rate:53.32  },
            {year: '2010', develop: 3525.3, sale: 2382.1, rate:53.33  },
            {year: '2011', develop: 4991.45, sale: 2432.61, rate: 53.39 },
            {year: '2012', develop: 4826.76, sale: 2452.42, rate: 54.52 },
            {year: '2013', develop: 3746.24, sale: 2214.96, rate: 55.73 },
            {year: '2014', develop: 3257.6, sale: 1581.72, rate: 56.81 },
            {year: '2015', develop: 2063.66, sale: 1491.85, rate:57.63  },
            {year: '2016', develop: 2115.99, sale: 1919.3, rate: 58.75 },
            {year: '2017', develop: 1907.88, sale: 1885.21, rate: 59.70 },
            {year: '2018', develop: 2477.96, sale: 2074.46, rate:60.87  },
            {year: '2019', develop: 2947.01, sale: 2122.34, rate: 61.64 },
            {year: '2020', develop: 2662.39, sale: 1831.22, rate:62.65  },
            {year: '2021', develop: 3120.87, sale: 1836.32, rate:63.37  },
            {year: '2022', develop: 869.5, sale: 1001.14, rate:63.71  }
        ]

        const heilongjiang_areadata=[
            {year: '2003', develop: 1110.41, sale: 814.64, rate:52.21 },
            {year: '2004', develop: 1242.93, sale: 857.15, rate: 52.62},
            {year: '2005', develop: 1485.11, sale: 1242.81, rate:53.09  },
            {year: '2006', develop: 1747.74, sale: 1482.71, rate:53.49  },
            {year: '2007', develop: 1834.07, sale: 1709.25, rate:53.90  },
            {year: '2008', develop: 2241.07, sale: 1486.57, rate: 55.40 },
            {year: '2009', develop: 2995.55, sale: 2016.98, rate: 55.49 },
            {year: '2010', develop: 5021.43, sale: 2720.95, rate:55.67  },
            {year: '2011', develop: 7274.22, sale: 3432.84, rate: 56.48 },
            {year: '2012', develop: 5074.35, sale: 3806.82, rate: 56.87 },
            {year: '2013', develop: 4030.44, sale: 3339.95, rate: 58.05 },
            {year: '2014', develop: 3281.38, sale: 2475.74, rate: 59.23 },
            {year: '2015', develop: 2181.79, sale: 1996.61, rate: 60.47 },
            {year: '2016', develop: 2006.31, sale: 2117.29, rate:61.10  },
            {year: '2017', develop: 2219.72, sale: 2255.81, rate: 61.90 },
            {year: '2018', develop: 2494.74, sale: 1913.25, rate: 63.45 },
            {year: '2019', develop: 2446.11, sale: 1684.5, rate:64.61  },
            {year: '2020', develop: 2221.97, sale: 1494.36, rate: 65.59 },
            {year: '2021', develop: 1738.31, sale: 1348.09, rate:65.70  },
            {year: '2022', develop: 991.14, sale: 925.51, rate:66.21  }
        ]

        const shanghai_areadata=[
            {year: '2003', develop: 3134.53, sale: 2376.4, rate: 88.59},
            {year: '2004', develop: 3196.19, sale: 3300.82, rate:88.97 },
            {year: '2005', develop: 3055.47, sale: 3158.87, rate: 89.10 },
            {year: '2006', develop: 2781.34, sale: 3025.4, rate: 88.70 },
            {year: '2007', develop: 2251.75, sale: 3694.96, rate: 88.66 },
            {year: '2008', develop: 2772.37, sale: 2339.29, rate: 88.60 },
            {year: '2009', develop: 2483.05, sale: 3372.45, rate: 88.60 },
            {year: '2010', develop: 3030.59, sale: 2060.96, rate: 89.27 },
            {year: '2011', develop: 3726.14, sale: 1790.86, rate: 89.30 },
            {year: '2012', develop: 2724.05, sale: 1898.46, rate: 89.29 },
            {year: '2013', develop: 2705.95, sale: 2382.2, rate:89.58  },
            {year: '2014', develop: 2782.02, sale: 2084.66, rate: 89.30 },
            {year: '2015', develop: 2605.08, sale: 2431.36, rate: 88.53 },
            {year: '2016', develop: 2840.95, sale: 2705.69, rate:89.01  },
            {year: '2017', develop: 2618, sale: 1691.6, rate:89.09  },
            {year: '2018', develop: 2687.17, sale: 1767.01, rate: 89.13 },
            {year: '2019', develop: 3063.44, sale: 1696.34, rate: 89.24 },
            {year: '2020', develop: 3440.62, sale: 1789.16, rate:89.31  },
            {year: '2021', develop: 3845.97, sale: 1880.45, rate: 89.31 },
            {year: '2022', develop: 2939.74, sale: 1852.88, rate: 89.33 }
        ]

        const jiangsu_areadata=[
            {year: '2003', develop: 5143.31, sale: 2721., rate:49.78 },
            {year: '2004', develop: 6507.63, sale: 3178.91, rate:50.03 },
            {year: '2005', develop: 6653.24, sale: 5135.55, rate: 50.50 },
            {year: '2006', develop: 7860.97, sale: 6101.15, rate: 51.89 },
            {year: '2007', develop: 9301.03, sale: 7598.48, rate:53.20  },
            {year: '2008', develop: 10725.53, sale: 6091.86, rate: 54.30 },
            {year: '2009', develop: 9209.46, sale: 10248.2, rate:55.61  },
            {year: '2010', develop: 13745.42, sale: 9485.47, rate: 60.58 },
            {year: '2011', develop: 14720.76, sale: 7970.49, rate: 62.01 },
            {year: '2012', develop: 13908.44, sale: 9019.18, rate:63.00  },
            {year: '2013', develop: 16358.18, sale: 11454.77, rate:64.39 },
            {year: '2014', develop: 14220.35, sale: 9846.84, rate: 65.70 },
            {year: '2015', develop: 11542.56, sale: 11414.05, rate: 67.49 },
            {year: '2016', develop: 13670.83, sale: 13962.09, rate: 68.93 },
            {year: '2017', develop: 13739.1, sale: 14211.12, rate: 70.18 },
            {year: '2018', develop: 16821.27, sale: 13484.21, rate:71.19  },
            {year: '2019', develop: 16227.47, sale: 13972.85, rate: 72.46 },
            {year: '2020', develop: 17672.82, sale: 15426.99, rate:73.45  },
            {year: '2021', develop: 16873.29, sale: 16551.82, rate:73.94  },
            {year: '2022', develop: 9907.3, sale: 12115.15, rate: 74.42 }
        ]

        const zhejiang_areadata=[
            {year: '2003', develop: 4988.7, sale: 2781.84, rate: 55.26},
            {year: '2004', develop: 5487.37, sale: 2794.25, rate:55.64 },
            {year: '2005', develop: 4859.59, sale: 3305.84, rate:56.02  },
            {year: '2006', develop: 4847.81, sale: 3544.96 , rate:56.51 },
            {year: '2007', develop: 5268.66, sale: 4541.97, rate:57.21  },
            {year: '2008', develop: 5256.52, sale: 2992.2 , rate:57.60 },
            {year: '2009', develop: 5606.45, sale: 5538.13 , rate:57.90 },
            {year: '2010', develop: 7841.27, sale: 4816.53, rate: 61.61 },
            {year: '2011', develop: 10210.6, sale: 3531.36, rate:62.30  },
            {year: '2012', develop: 7816.8, sale: 4005.29, rate:62.90  },
            {year: '2013', develop: 9315.1, sale: 4886.99, rate:63.93  },
            {year: '2014', develop: 9676.14, sale: 4676.83, rate:64.96  },
            {year: '2015', develop: 6533.77, sale: 5985.3, rate:66.32  },
            {year: '2016', develop: 7282.02, sale: 8636.79, rate:67.72  },
            {year: '2017', develop: 10117.49, sale: 9599.67, rate:68.91  },
            {year: '2018', develop: 12879.28, sale: 9755.49, rate:70.01  },
            {year: '2019', develop: 12730.92, sale: 9378.31, rate:71.58  },
            {year: '2020', develop: 15875.49, sale: 10250.3, rate:72.17  },
            {year: '2021', develop: 12305.31, sale: 9990.65, rate:72.66  },
            {year: '2022', develop: 7988.56, sale: 6815.33, rate: 73.38 }
        ]

        const anhui_areadata=[
            {year: '2003', develop: 1655.56, sale: 1093.27, rate: 34.02},
            {year: '2004', develop: 2191.49, sale: 1429.24, rate: 34.67},
            {year: '2005', develop: 2623.41, sale: 1907.21, rate: 35.51 },
            {year: '2006', develop: 3171.88, sale: 2307.83, rate: 37.10 },
            {year: '2007', develop: 3714.17, sale: 3083.39, rate: 38.71 },
            {year: '2008', develop: 4585.04, sale: 2785.83, rate: 40.51 },
            {year: '2009', develop: 5315.62, sale: 4030.92, rate: 42.10 },
            {year: '2010', develop: 7353.95, sale: 4154.26, rate: 43.01 },
            {year: '2011', develop: 8658.67, sale: 4605.58, rate: 44.79 },
            {year: '2012', develop: 7874.22, sale: 4828.81, rate:46.30  },
            {year: '2013', develop: 10077.71, sale: 6265.35, rate: 47.86 },
            {year: '2014', develop: 8736.77, sale: 6265.35, rate:49.31  },
            {year: '2015', develop: 7759.35, sale: 6174.09, rate: 50.97 },
            {year: '2016', develop: 8586.37, sale: 8499.65, rate:52.63  },
            {year: '2017', develop: 11398.66, sale: 9200.71, rate: 54.28 },
            {year: '2018', develop: 10849.59, sale: 10038.43, rate:55.65 },
            {year: '2019', develop: 11117.46, sale: 9229.38, rate: 57.03 },
            {year: '2020', develop: 11785.64, sale: 9534.13, rate: 58.33 },
            {year: '2021', develop: 10434.89, sale: 10460.9, rate: 59.40 },
            {year: '2022', develop: 6843.01, sale: 6756.92, rate: 60.16 }
        ]

        const fujian_areadata=[
            {year: '2003', develop: 1903, sale: 1250.1, rate:47.69 },
            {year: '2004', develop: 1911.63, sale: 1384.83, rate: 48.43},
            {year: '2005', develop: 2196.57, sale: 1913.84, rate:49.40  },
            {year: '2006', develop: 2497.01, sale: 2021.69, rate: 50.40 },
            {year: '2007', develop: 3927.1, sale: 2421.95, rate:51.41  },
            {year: '2008', develop: 2797.74, sale: 1625.67, rate:53.01  },
            {year: '2009', develop: 2423.35, sale: 2723.23, rate: 55.10 },
            {year: '2010', develop: 4679.56, sale: 2575.62, rate: 57.11 },
            {year: '2011', develop: 7069.47, sale: 2706.72, rate: 58.11 },
            {year: '2012', develop: 5342.97, sale: 3258.94, rate: 59.31 },
            {year: '2013', develop: 7193.01, sale: 4676.16, rate: 60.80 },
            {year: '2014', develop: 6754.06, sale: 4119.48, rate: 62.00 },
            {year: '2015', develop: 5244.85, sale: 4037.76, rate: 63.23 },
            {year: '2016', develop: 4875.06, sale: 4915.35, rate: 64.39 },
            {year: '2017', develop: 5528.75, sale: 5854.05, rate: 65.78 },
            {year: '2018', develop: 7205.35, sale: 6213.4, rate: 66.98 },
            {year: '2019', develop: 6398.36, sale: 6456.13, rate: 67.88 },
            {year: '2020', develop: 6637.99, sale: 6607.18, rate:68.76   },
            {year: '2021', develop: 6439.2, sale: 6976.44, rate: 69.69 },
            {year: '2022', develop: 4133.58, sale: 5452.22, rate: 70.13 }
        ]

        const jiangxi_areadata=[
            {year: '2003', develop: 1484.17, sale: 865.83, rate:35.15 },
            {year: '2004', develop: 1698.47, sale: 1168.87, rate:36.03 },
            {year: '2005', develop: 2490.82, sale: 1650.12, rate:37.00  },
            {year: '2006', develop: 2360.7, sale: 1777.19, rate:38.67  },
            {year: '2007', develop: 2613.94, sale: 2175.59, rate: 39.81 },
            {year: '2008', develop: 2529.9, sale: 1727.6, rate:41.36  },
            {year: '2009', develop: 2300.96, sale: 2280.91, rate:43.19  },
            {year: '2010', develop: 2344.98, sale: 2469.73, rate: 44.06 },
            {year: '2011', develop: 3486.67, sale: 2416.85, rate: 45.75 },
            {year: '2012', develop: 3261.03, sale: 2397.1, rate: 47.40 },
            {year: '2013', develop: 4138.96, sale: 3167.06, rate: 49.04 },
            {year: '2014', develop: 3348.42, sale: 3067.16, rate:50.56  },
            {year: '2015', develop: 3704.87, sale: 3478.23, rate:52.31  },
            {year: '2016', develop: 3875.01, sale: 4691.84, rate:53.98  },
            {year: '2017', develop: 4954.33, sale: 5841.93, rate: 55.71 },
            {year: '2018', develop: 5801.49, sale: 6200.71, rate:57.35  },
            {year: '2019', develop: 5862.57, sale: 6458.86, rate:59.08  },
            {year: '2020', develop: 5301.79, sale: 6732.71, rate: 60.43 },
            {year: '2021', develop: 5282.04, sale: 7676.21, rate:61.46  },
            {year: '2022', develop: 3629.35, sale: 6702.65, rate: 62.08 }
        ]

        const shandong_areadata=[
            {year: '2003', develop: 4039.93, sale: 2251.52, rate:43.16 },
            {year: '2004', develop: 4017.45, sale: 2525.17, rate: 44.04},
            {year: '2005', develop: 5650.04, sale: 3754.92, rate:45.00  },
            {year: '2006', develop: 5930.33, sale: 4172.21, rate:46.10  },
            {year: '2007', develop: 6623.54, sale: 5063.01, rate: 46.75 },
            {year: '2008', develop: 7662.36, sale: 5507.64, rate:47.61  },
            {year: '2009', develop: 8491.78, sale: 7016.35, rate: 48.32 },
            {year: '2010', develop: 12330.21, sale: 9293.88, rate:49.70  },
            {year: '2011', develop: 14065.34, sale: 9576.01, rate: 50.86 },
            {year: '2012', develop: 13902.72, sale: 8632.76, rate:52.03  },
            {year: '2013', develop: 15390.76, sale: 10329.8, rate: 53.46 },
            {year: '2014', develop: 13328.07, sale: 9180.12, rate: 54.77 },
            {year: '2015', develop: 12043.38, sale: 9727.04, rate: 56.97 },
            {year: '2016', develop: 13293.69, sale: 11789.88, rate:59.13 },
            {year: '2017', develop: 14424.99, sale: 12813.18, rate: 60.79 },
            {year: '2018', develop: 18732.25, sale: 13454.73, rate:61.46  },
            {year: '2019', develop: 22658.9, sale: 12727.25, rate:61.86  },
            {year: '2020', develop: 20204.08, sale: 13271.74, rate: 63.05 },
            {year: '2021', develop: 16572.1, sale: 14272.85, rate:63.94  },
            {year: '2022', develop: 10520.58, sale: 11685.56, rate:64.54  }
        ]

        const henan_areadata=[
            {year: '2003', develop: 1486.47, sale: 862.71, rate: 26.98},
            {year: '2004', develop: 1673.68, sale: 1043.51, rate: 28.34},
            {year: '2005', develop: 2150.58, sale: 1724.82, rate: 30.65 },
            {year: '2006', develop: 3330.88, sale: 2409.33, rate: 32.47 },
            {year: '2007', develop: 5078.38, sale: 3928.04, rate: 34.34 },
            {year: '2008', develop: 5551.26, sale: 3191.98, rate: 36.03 },
            {year: '2009', develop: 7115.63, sale: 4335.09, rate: 37.70 },
            {year: '2010', develop: 8610.57, sale: 5452.23, rate: 38.50 },
            {year: '2011', develop: 9890.83, sale: 6275.16, rate: 40.47 },
            {year: '2012', develop: 10515.11, sale: 5968.49, rate: 41.98 },
            {year: '2013', develop: 12465.09, sale: 7310.21, rate: 43.60 },
            {year: '2014', develop: 10586.54, sale: 7879.67, rate:45.05  },
            {year: '2015', develop: 10974.12, sale: 8556.34, rate: 47.02 },
            {year: '2016', develop: 14669.72, sale: 11306.27, rate:48.78 },
            {year: '2017', develop: 13628.78, sale: 13313.89, rate: 50.56 },
            {year: '2018', develop: 14677.65, sale: 13990.5, rate:52.24  },
            {year: '2019', develop: 15836.53, sale: 14277.55, rate:54.01  },
            {year: '2020', develop: 14114.24, sale: 14100.66, rate:55.43  },
            {year: '2021', develop: 13652.89, sale: 13277.19, rate: 56.45 },
            {year: '2022', develop: 8525.14, sale: 9259.98, rate: 57.06 }
        ]

        const hubei_areadata=[
            {year: '2003', develop: 1542.34, sale: 1073.48, rate: 42.06},
            {year: '2004', develop: 2026.9, sale: 1342.92, rate: 42.67},
            {year: '2005', develop: 2292.92, sale: 1708.02, rate: 43.20 },
            {year: '2006', develop: 2355.67, sale: 2038.46, rate: 43.81 },
            {year: '2007', develop: 2900.65, sale: 2538.9, rate:44.31  },
            {year: '2008', develop: 3112.99, sale: 1941.62, rate: 45.19 },
            {year: '2009', develop: 3975.84, sale: 2718.05, rate:46.00  },
            {year: '2010', develop: 5725.77, sale: 3508.61, rate: 49.70 },
            {year: '2011', develop: 5577.11, sale: 4187.62, rate: 51.79 },
            {year: '2012', develop: 5976.06, sale: 4037.85, rate: 53.23 },
            {year: '2013', develop: 8226.71, sale: 5298.54, rate: 54.50 },
            {year: '2014', develop: 7598.69, sale: 5601.98, rate:55.73  },
            {year: '2015', develop: 6734.67, sale: 6244.55, rate: 57.18 },
            {year: '2016', develop: 6850.1, sale: 7427.16, rate:58.57  },
            {year: '2017', develop: 7771.87, sale: 8155.21, rate: 59.87 },
            {year: '2018', develop: 8495.32, sale: 8865.38, rate:60.99  },
            {year: '2019', develop: 8708.85, sale: 8602.04, rate:61.84  },
            {year: '2020', develop: 8452.55, sale: 6587.83, rate:62.89  },
            {year: '2021', develop: 7843.69, sale: 7940.78, rate:64.08  },
            {year: '2022', develop: 4269.46, sale: 6083.53, rate:64.66  }
        ]

        const hunan_areadata=[
            {year: '2003', develop: 1476.75, sale: 848.47, rate:34.61 },
            {year: '2004', develop: 1897.14, sale: 1188.79, rate:35.73 },
            {year: '2005', develop: 2106.4, sale: 1842.16, rate: 37.01 },
            {year: '2006', develop: 2845.66, sale: 2021.61, rate: 38.71 },
            {year: '2007', develop: 3562.36, sale: 2734.42, rate: 40.46 },
            {year: '2008', develop: 4231.36, sale: 2655.51, rate: 42.15 },
            {year: '2009', develop: 5319.82, sale: 3513.72, rate:43.19  },
            {year: '2010', develop: 6443.3, sale: 4469.98, rate: 43.30 },
            {year: '2011', develop: 7318.64, sale: 4900.33, rate: 44.96 },
            {year: '2012', develop: 6631.62, sale: 5150.48, rate: 46.22 },
            {year: '2013', develop: 8869.13, sale: 5952.38, rate:47.64  },
            {year: '2014', develop: 8067.05, sale: 5439.53, rate: 48.98 },
            {year: '2015', develop: 6394.58, sale: 6363.01, rate: 50.79 },
            {year: '2016', develop: 7472.56, sale: 8085.36, rate: 52.69 },
            {year: '2017', develop: 8235.91, sale: 8532.25, rate: 54.62 },
            {year: '2018', develop: 11127.65, sale: 9239.15, rate: 56.10 },
            {year: '2019', develop: 11933.23, sale: 9103.5, rate: 57.45 },
            {year: '2020', develop: 10916.16, sale: 9437.44, rate:58.77  },
            {year: '2021', develop: 10168.21, sale: 9188.79, rate: 59.71 },
            {year: '2022', develop: 5522.54, sale: 6652.58, rate: 60.31 }
        ]

        const guangdong_areadata=[
            {year: '2003', develop: 4328.19, sale: 3061.32, rate:58.15 },
            {year: '2004', develop: 4921.63, sale: 3346.02, rate:59.02 },
            {year: '2005', develop: 4989.82, sale: 5038.91, rate:60.68  },
            {year: '2006', develop: 5674.38, sale: 5178.56, rate: 63.01 },
            {year: '2007', develop: 7412.47, sale: 6174.57, rate: 63.14 },
            {year: '2008', develop: 6557.16, sale: 4852.28, rate: 63.37 },
            {year: '2009', develop: 6479.85, sale: 7060.03, rate: 63.41 },
            {year: '2010', develop: 9904.38, sale: 7321.76, rate: 66.18 },
            {year: '2011', develop: 12013.99, sale: 7427.87, rate: 66.57 },
            {year: '2012', develop: 10615.73, sale: 7898.99, rate: 67.15 },
            {year: '2013', develop: 14265.48, sale: 9836.39, rate:68.09  },
            {year: '2014', develop: 13384.34, sale: 9315.76, rate: 68.62 },
            {year: '2015', develop: 12676.74, sale: 11681.01, rate: 69.51 },
            {year: '2016', develop: 14847.51, sale: 14611.6, rate: 70.15 },
            {year: '2017', develop: 16775.55, sale: 15958.81, rate:70.74  },
            {year: '2018', develop: 19144.08, sale: 14336.31, rate: 71.81 },
            {year: '2019', develop: 18437.38, sale: 13846.54, rate:72.65  },
            {year: '2020', develop: 18407.77, sale: 14908.25, rate: 74.15 },
            {year: '2021', develop: 16097.26, sale: 14011.26, rate: 74.63 },
            {year: '2022', develop: 8535.4, sale: 10591.11, rate:74.78  }
        ]

        const guangxi_areadata=[
            {year: '2003', develop: 1058.18, sale: 505.31, rate: 31.89},
            {year: '2004', develop: 1313.97, sale: 820.36, rate: 32.71},
            {year: '2005', develop: 1633.29, sale: 1438.4, rate: 33.63 },
            {year: '2006', develop: 1776.74, sale: 1502.61, rate: 34.65 },
            {year: '2007', develop: 2184.89, sale: 2016.23, rate: 36.24 },
            {year: '2008', develop: 2258.39, sale: 1768.04, rate: 38.16 },
            {year: '2009', develop: 3020.02, sale: 2383.76, rate: 39.21 },
            {year: '2010', develop: 4750.57, sale: 2793.92, rate: 40.00 },
            {year: '2011', develop: 3991.65, sale: 2964.15, rate: 41.89 },
            {year: '2012', develop: 3741.88, sale: 2759.26, rate: 43.48 },
            {year: '2013', develop: 3715.67, sale: 2995.58, rate:45.11  },
            {year: '2014', develop: 4138.43, sale: 3156.55, rate: 46.54 },
            {year: '2015', develop: 3850.07, sale: 3523.41, rate: 47.99 },
            {year: '2016', develop: 4984.18, sale: 4215.39, rate: 49.25 },
            {year: '2017', develop: 4912.21, sale: 5170.99, rate: 50.58 },
            {year: '2018', develop: 6059.3, sale: 6212.9, rate: 51.83 },
            {year: '2019', develop: 8218.52, sale: 6711.77, rate: 52.97 },
            {year: '2020', develop: 7877.62, sale: 6729.02, rate: 54.19 },
            {year: '2021', develop: 5329.29, sale: 6178.26, rate: 55.07 },
            {year: '2022', develop: 3033.98, sale: 4192.78, rate:55.66 }
        ]

        const hainan_areadata=[
            {year: '2003', develop: 170.67, sale: 112.64, rate: 43.46},
            {year: '2004', develop: 254.36, sale: 125.76, rate: 44.29},
            {year: '2005', develop: 253.39, sale: 249.43, rate: 45.17 },
            {year: '2006', develop: 294.93, sale: 203.43, rate: 46.05 },
            {year: '2007', develop: 339.95, sale: 312.52, rate: 47.22 },
            {year: '2008', develop: 594.69, sale: 372.44, rate: 48.01 },
            {year: '2009', develop: 807.26, sale: 561.36, rate: 49.19 },
            {year: '2010', develop: 1136.12, sale: 854.73, rate: 49.83 },
            {year: '2011', develop: 1629.06, sale: 865.74, rate:50.34  },
            {year: '2012', develop: 1661.29, sale: 931.84, rate: 50.99 },
            {year: '2013', develop: 1735.42, sale: 1191.23, rate:52.28  },
            {year: '2014', develop: 1583.64, sale: 1003.97, rate: 53.31 },
            {year: '2015', develop: 1644.72, sale: 1052.28, rate:54.92  },
            {year: '2016', develop: 1976.16, sale: 1508.53, rate: 56.74 },
            {year: '2017', develop: 2109.74, sale: 2292.61, rate: 58.02 },
            {year: '2018', develop: 1944.64, sale: 1432.25, rate: 59.16 },
            {year: '2019', develop: 1219.56, sale: 829.34, rate: 59.40 },
            {year: '2020', develop: 1064.95, sale: 751.54, rate: 60.28 },
            {year: '2021', develop: 1341.14, sale: 888.92, rate:60.98  },
            {year: '2022', develop: 1058.04, sale: 643.99, rate: 61.44 }
        ]

        const chongqing_areadata=[
            {year: '2003', develop: 2098.24, sale: 1316.8, rate:43.79 },
            {year: '2004', develop: 2144.84, sale: 1317.12, rate:44.58 },
            {year: '2005', develop: 2334.75, sale: 2017.66, rate: 45.21 },
            {year: '2006', develop: 2709.28, sale: 2228.46, rate: 46.69 },
            {year: '2007', develop: 3555.87, sale: 3552.92, rate: 48.30 },
            {year: '2008', develop: 3508.62, sale: 2872.19, rate: 49.98 },
            {year: '2009', develop: 3813.68, sale: 4002.89, rate: 51.59 },
            {year: '2010', develop: 6312.64, sale: 4314.39, rate: 53.00 },
            {year: '2011', develop: 6824.36, sale: 4533.5, rate: 54.99 },
            {year: '2012', develop: 5813.48, sale: 4522.4, rate:56.64  },
            {year: '2013', develop: 7641.63, sale: 4817.56, rate: 58.29 },
            {year: '2014', develop: 6254.04, sale: 5100.39, rate: 59.74 },
            {year: '2015', develop: 5810.85, sale: 5381.37, rate: 61.47 },
            {year: '2016', develop: 4875.16, sale: 6257.15, rate: 63.34 },
            {year: '2017', develop: 5680.04, sale: 6711, rate: 65.01 },
            {year: '2018', develop: 7386.16, sale: 6536.25, rate: 66.61 },
            {year: '2019', develop: 6725.4, sale: 6104.68, rate:68.22  },
            {year: '2020', develop: 5947.7, sale: 6143.47, rate:69.46  },
            {year: '2021', develop: 4873.36, sale: 6197.71, rate: 70.33 },
            {year: '2022', develop: 2222.44, sale: 4142.92, rate: 70.96 }
        ]

        const sichuan_areadata=[
            {year: '2003', develop: 3646.77, sale: 2457.85, rate: 31.69},
            {year: '2004', develop: 3146.84, sale: 2101.98, rate:32.98 },
            {year: '2005', develop: 3684.37, sale: 3402.49, rate:33.00  },
            {year: '2006', develop: 4847.03, sale: 4100.15, rate:34.30  },
            {year: '2007', develop: 5228.86, sale: 4923.84, rate:35.60  },
            {year: '2008', develop: 4962.01, sale: 3501.27, rate:37.40  },
            {year: '2009', develop: 5235.88, sale: 5967.69, rate:38.70 },
            {year: '2010', develop: 7731.66, sale: 6396.92, rate: 40.17 },
            {year: '2011', develop: 8435.82, sale: 6543.55, rate:41.85  },
            {year: '2012', develop: 8367.21, sale: 6455.93, rate:43.35  },
            {year: '2013', develop: 10163.57, sale: 7312.78, rate: 44.96 },
            {year: '2014', develop: 11328.04, sale: 7142.44, rate: 46.50 },
            {year: '2015', develop: 9587.21, sale: 7671.2, rate:48.27  },
            {year: '2016', develop: 10825.16, sale: 9300.47, rate: 50.01 },
            {year: '2017', develop: 11521.59, sale: 10869.07, rate: 51.78 },
            {year: '2018', develop: 14094.44, sale: 12210.73, rate:53.50  },
            {year: '2019', develop: 15325.5, sale: 12978.61, rate: 55.36 },
            {year: '2020', develop: 13939.74, sale: 13257.75, rate: 56.73 },
            {year: '2021', develop: 11493.57, sale: 13692.91, rate:57.82  },
            {year: '2022', develop: 8329.75, sale: 9321.37, rate: 58.35 }
        ]

        const guizhou_areadata=[
            {year: '2003', develop: 902.94, sale: 554.34, rate: 24.98},
            {year: '2004', develop: 877.8, sale: 554.34, rate: 25.79},
            {year: '2005', develop: 1007.7, sale: 862.56, rate:26.86  },
            {year: '2006', develop: 1289.05, sale: 880.95, rate: 27.45 },
            {year: '2007', develop: 1574.63, sale: 1071.57, rate: 28.25 },
            {year: '2008', develop: 1593.51, sale: 908.2, rate: 29.12 },
            {year: '2009', develop: 1755.24, sale: 1653.05, rate: 29.88 },
            {year: '2010', develop: 2871.15, sale: 1730.69, rate: 33.80 },
            {year: '2011', develop: 2885.07, sale: 1882.1, rate:35.04  },
            {year: '2012', develop: 3787.67, sale: 2186.95, rate: 36.30 },
            {year: '2013', develop: 5628.24, sale: 2972.32, rate:37.89  },
            {year: '2014', develop: 4616.49, sale: 3178.12, rate: 40.25 },
            {year: '2015', develop: 4206.12, sale: 3559.81, rate: 42.96 },
            {year: '2016', develop: 3467.55, sale: 4156.93, rate:45.56  },
            {year: '2017', develop: 3310.77, sale: 4696.9, rate:47.75  },
            {year: '2018', develop: 5689.2, sale: 5181.96, rate:49.53  },
            {year: '2019', develop: 7239.89, sale: 5323.31, rate:51.48  },
            {year: '2020', develop: 5441.06, sale: 5552.51, rate:53.16  },
            {year: '2021', develop: 4528.09, sale: 5585.99, rate: 54.34 },
            {year: '2022', develop: 2155.41, sale: 2908.17, rate:54.82  }
        ]

        const yunnan_areadata=[
            {year: '2003', develop: 701.23, sale: 521.97, rate:27.97 },
            {year: '2004', develop: 948.18, sale: 538.11, rate: 28.67},
            {year: '2005', develop: 1294.43, sale: 1431.9, rate:29.51  },
            {year: '2006', develop: 1255.01, sale: 1693.07, rate:30.49  },
            {year: '2007', develop: 2018.53, sale: 1976.29, rate:31.59  },
            {year: '2008', develop: 2167.11, sale: 1643.08, rate: 33.00 },
            {year: '2009', develop: 2820.84, sale: 2229.95, rate:34.00  },
            {year: '2010', develop: 3702.76, sale: 2959.43, rate: 34.70 },
            {year: '2011', develop: 4907.07, sale: 3222.89, rate: 36.58 },
            {year: '2012', develop: 6037.53, sale: 3237.75, rate: 38.48 },
            {year: '2013', develop: 6481.8, sale: 3309.3, rate: 39.99 },
            {year: '2014', develop: 5458.43, sale: 3194.19, rate: 41.22 },
            {year: '2015', develop: 3841.29, sale: 3145.13, rate:42.93  },
            {year: '2016', develop: 3453.98, sale: 3145.13, rate: 44.64 },
            {year: '2017', develop: 4017.34, sale: 4327.18, rate:46.28  },
            {year: '2018', develop: 4738.28, sale: 4531.88, rate: 47.44 },
            {year: '2019', develop: 8018.51, sale: 4835.41, rate: 48.66 },
            {year: '2020', develop: 7538.09, sale: 4857.26, rate: 50.04 },
            {year: '2021', develop: 6462.21, sale: 3880.84, rate: 51.04 },
            {year: '2022', develop: 2922.93, sale: 2938.37, rate:51.72  }
        ]

        const xizang_areadata=[
            {year: '2003', develop: 17.37, sale: 10.32, rate:19.02 },
            {year: '2004', develop: 30.05, sale: 9.56, rate:19.87 },
            {year: '2005', develop: 38.81, sale: 25.9, rate: 20.71 },
            {year: '2006', develop: 60.37, sale: 57.1, rate: 21.05 },
            {year: '2007', develop: 56.42, sale: 60.78, rate:21.45  },
            {year: '2008', develop: 60.12, sale: 66.49, rate:21.92  },
            {year: '2009', develop: 37.35, sale: 63.26, rate:22.30  },
            {year: '2010', develop: 16.92, sale: 19.28, rate: 22.67 },
            {year: '2011', develop: 4.53, sale: 18.25, rate:22.65  },
            {year: '2012', develop: 22.68, sale: 22.5, rate:22.86  },
            {year: '2013', develop: 27.76, sale: 25.4, rate: 23.97 },
            {year: '2014', develop: 191.49, sale: 59.33, rate: 26.15 },
            {year: '2015', develop: 119.87, sale: 51.27, rate: 28.79 },
            {year: '2016', develop: 57.01, sale: 74.61, rate: 31.47 },
            {year: '2017', develop: 61.07, sale: 53.25, rate:33.24  },
            {year: '2018', develop: 193.06, sale: 73.35, rate:33.90  },
            {year: '2019', develop: 416.89, sale: 127.71, rate:34.63  },
            {year: '2020', develop: 222.83, sale: 93.26, rate:35.79  },
            {year: '2021', develop: 222.34, sale: 140.81, rate: 36.61 },
            {year: '2022', develop: 80.6, sale: 59.59, rate: 37.36 }
        ]

        const shan3xi_areadata=[
            {year: '2003', develop: 944.09, sale: 580.05, rate:35.31 },
            {year: '2004', develop: 897.84, sale: 509.36, rate: 36.03},
            {year: '2005', develop: 1234.75, sale: 892.01, rate:37.24  },
            {year: '2006', develop: 1105.31, sale: 1116.51, rate:39.12  },
            {year: '2007', develop: 1446.78, sale: 1460.17, rate: 40.61 },
            {year: '2008', develop: 2051.24, sale: 1513.01, rate:42.09  },
            {year: '2009', develop: 2796.27, sale: 2086.92, rate: 43.49 },
            {year: '2010', develop: 3270.32, sale: 2590.18, rate: 45.76 },
            {year: '2011', develop: 4027.44, sale: 3051.77, rate: 47.36 },
            {year: '2012', develop: 4738.32, sale: 2755.59, rate: 49.72 },
            {year: '2013', develop: 4483.35, sale: 3045.7, rate: 51.58 },
            {year: '2014', develop: 3943.16, sale: 3093.64, rate:53.02  },
            {year: '2015', develop: 3964.44, sale: 2978.94, rate: 54.73 },
            {year: '2016', develop: 4483.64, sale: 3262.7, rate: 56.40 },
            {year: '2017', develop: 4279.08, sale: 3890.4, rate: 58.07 },
            {year: '2018', develop: 5451.76, sale: 4118.56, rate: 59.65 },
            {year: '2019', develop: 6431.21, sale: 4401.06, rate: 61.28 },
            {year: '2020', develop: 5796.94, sale: 4452.07, rate: 62.65 },
            {year: '2021', develop: 5970.37, sale: 4260.06, rate: 63.63 },
            {year: '2022', develop: 4413.39, sale: 3308.72, rate: 64.00 }
        ]

        const gansu_areadata=[
            {year: '2003', develop: 462.45, sale: 224.77, rate:28.10 },
            {year: '2004', develop: 693.38, sale: 261.47, rate:29.03 },
            {year: '2005', develop: 389.78, sale: 493.21, rate: 30.02 },
            {year: '2006', develop: 560.33, sale: 515.48, rate: 31.10 },
            {year: '2007', develop: 695.72, sale: 592.27, rate:32.26  },
            {year: '2008', develop: 986.09, sale: 624.66, rate: 33.56 },
            {year: '2009', develop: 1046.92, sale: 698.82, rate:34.87  },
            {year: '2010', develop: 1395.98, sale: 756.51, rate:36.13  },
            {year: '2011', develop: 1777.56, sale: 838.82, rate: 37.26 },
            {year: '2012', develop: 2404.51, sale: 978.44, rate:38.78  },
            {year: '2013', develop: 2451.19, sale: 1220.02, rate:40.48  },
            {year: '2014', develop: 2050.36, sale: 1325.51, rate: 42.28 },
            {year: '2015', develop: 2312.66, sale: 1434.96, rate:44.23  },
            {year: '2016', develop: 2331.71, sale: 1679.49, rate: 46.07 },
            {year: '2017', develop: 2374.63, sale: 1559.51, rate: 48.14 },
            {year: '2018', develop: 2443.03, sale: 1595.65, rate: 49.70 },
            {year: '2019', develop: 3307.26, sale: 1705.31, rate:50.70  },
            {year: '2020', develop: 3534.11, sale: 1967.92, rate: 52.22 },
            {year: '2021', develop: 3369.78, sale: 2224.09, rate:53.33  },
            {year: '2022', develop: 2105.32, sale: 1470.42, rate: 54.21 }
        ]

        const qinghai_areadata=[
            {year: '2003', develop: 236.34, sale: 83.51, rate:38.10  },
            {year: '2004', develop: 185.93, sale: 93.85, rate:38.73  },
            {year: '2005', develop: 243.06, sale: 121.04, rate: 39.23 },
            {year: '2006', develop: 209.89, sale: 119.69, rate: 39.23 },
            {year: '2007', develop: 273.99, sale: 154.53, rate: 40.04 },
            {year: '2008', develop: 299.12, sale: 147.89, rate: 40.79 },
            {year: '2009', develop: 505.13, sale: 216.82, rate: 42.01 },
            {year: '2010', develop: 700.67, sale: 281.04, rate:44.76  },
            {year: '2011', develop: 532.33, sale: 359.56, rate:46.48  },
            {year: '2012', develop: 772.9, sale: 262.96, rate: 47.81 },
            {year: '2013', develop: 859.76, sale: 381.56, rate:49.21  },
            {year: '2014', develop: 694.77, sale: 415.77, rate: 50.87 },
            {year: '2015', develop: 785.52, sale: 392.96, rate:51.65  },
            {year: '2016', develop: 870.1, sale: 437.85, rate: 53.61 },
            {year: '2017', develop: 714.37, sale: 494.04, rate:55.46  },
            {year: '2018', develop: 513.83, sale: 447.93, rate: 57.24 },
            {year: '2019', develop: 865.9, sale: 480.52, rate: 58.81 },
            {year: '2020', develop: 923.17, sale: 469.66, rate:60.03  },
            {year: '2021', develop: 790.89, sale: 386.16, rate: 60.94 },
            {year: '2022', develop: 422.52, sale: 204.42, rate: 61.51 }
        ]

        const ningxia_areadata=[
            {year: '2003', develop: 532.55, sale: 232.38, rate: 40.51 },
            {year: '2004', develop: 602.17, sale: 308.21, rate: 41.39 },
            {year: '2005', develop: 580.85, sale: 377.89, rate: 42.28  },
            {year: '2006', develop: 697.26, sale: 379.99, rate: 43.05  },
            {year: '2007', develop: 718.59, sale: 507.76, rate: 44.10  },
            {year: '2008', develop: 867.39, sale: 514.81, rate: 44.98  },
            {year: '2009', develop: 1160.26, sale: 775.29, rate: 46.08  },
            {year: '2010', develop: 1808.73, sale: 935.98, rate: 47.87  },
            {year: '2011', develop: 1989.2, sale: 846.46, rate: 50.15  },
            {year: '2012', develop: 1842.78, sale: 804.43, rate: 51.14  },
            {year: '2013', develop: 2163.12, sale: 1048.31, rate: 52.85  },
            {year: '2014', develop: 2053.77, sale: 1129.46, rate: 54.87  },
            {year: '2015', develop: 1391.12, sale: 839.16, rate: 57.02  },
            {year: '2016', develop: 1391.34, sale: 966.07, rate: 58.71  },
            {year: '2017', develop: 1187.61, sale: 1021.36, rate:60.99   },
            {year: '2018', develop: 994.55, sale: 1026.5, rate: 62.11  },
            {year: '2019', develop: 1185.67, sale: 1009.55, rate: 63.60  },
            {year: '2020', develop: 1039.16, sale: 1095.49, rate: 64.91  },
            {year: '2021', develop: 1396.73, sale: 1014.45, rate: 66.07  },
            {year: '2022', develop: 766.18, sale: 715.6, rate: 66.35  }
        ]

        const xinjiang_areadata=[
            {year: '2003', develop: 782.78, sale: 587.02, rate: 34.79 },
            {year: '2004', develop: 782.81, sale: 643.37, rate: 36.53 },
            {year: '2005', develop: 793.55, sale: 687.2, rate: 37.16  },
            {year: '2006', develop: 1035.59, sale: 892.41, rate: 37.95  },
            {year: '2007', develop: 1347.11, sale: 1144.34, rate: 39.14  },
            {year: '2008', develop: 1703.86, sale: 954.35, rate: 39.65  },
            {year: '2009', develop: 1718.17, sale: 1406.55, rate: 39.83  },
            {year: '2010', develop: 2177.24, sale: 1564.9, rate: 43.02  },
            {year: '2011', develop: 2974.51, sale: 1728.23, rate: 43.73  },
            {year: '2012', develop: 2823.65, sale: 1430.31, rate: 44.21  },
            {year: '2013', develop: 3729.87, sale: 2017.03, rate: 44.95  },
            {year: '2014', develop: 3561.09, sale: 1815.88, rate: 46.80  },
            {year: '2015', develop: 2994.75, sale: 1825.18, rate: 48.76  },
            {year: '2016', develop: 2205.57, sale: 1828.22, rate: 50.41  },
            {year: '2017', develop: 2578.54, sale: 1598.11, rate: 51.90  },
            {year: '2018', develop: 2390.67, sale: 1452.23, rate: 54.01  },
            {year: '2019', develop: 3032.66, sale: 1724.18, rate: 55.53  },
            {year: '2020', develop: 4525.97, sale: 1963.69, rate: 56.53  },
            {year: '2021', develop: 4035.07, sale: 2398.61, rate: 57.24  },
            {year: '2022', develop: 2623.1, sale: 1516.24, rate: 57.90  }
        ]
    </script>

    <script>
        var drawzhuzhuangtu=true;

        window.onload = function(){
            renderBarGroups(country_areadata, ['develop', 'sale']);
        }

        document.getElementById("options1")//选择地点
            .addEventListener("change", upgradegraph);
        document.getElementById('options2')//开始时间
            .addEventListener("change",upgradegraph);
        document.getElementById('options3')//结束时间
            .addEventListener("change",upgradegraph);
        function upgradegraph(){
            var startYear = document.getElementById("options2").value;
            var endYear = document.getElementById("options3").value;
            var selectedCity = document.getElementById('options1').value;
            if(selectedCity === "country_areadata"){
                var targetData = country_areadata.filter(function(d) {
                    return d.year >= startYear && d.year <= endYear;
                });
                renderBarGroups(targetData, ['develop', 'sale']);
            }//全国
            else if (selectedCity === "beijing_areadata") {
                var targetData = beijing_areadata.filter(function(d) {
                    return d.year >= startYear && d.year <= endYear;
                });
                renderBarGroups(targetData, ['develop', 'sale']);
            } //北京
            else if (selectedCity === "tianjin_areadata") {
                var targetData = tianjin_areadata.filter(function(d) {
                    return d.year >= startYear && d.year <= endYear;
                });
                renderBarGroups(targetData, ['develop', 'sale']);
            }//天津
            else if (selectedCity === "hebei_areadata") {
                var targetData = hebei_areadata.filter(function(d) {
                    return d.year >= startYear && d.year <= endYear;
                });
                renderBarGroups(targetData, ['develop', 'sale']);
            }//河北
            else if (selectedCity === "shan1xi_areadata") {
                var targetData = shan1xi_areadata.filter(function(d) {
                    return d.year >= startYear && d.year <= endYear;
                });
                renderBarGroups(targetData, ['develop', 'sale']);
            }//山西
            else if (selectedCity === "neimenggu_areadata") {
                var targetData = neimenggu_areadata.filter(function(d) {
                    return d.year >= startYear && d.year <= endYear;
                });
                renderBarGroups(targetData, ['develop', 'sale']);
            }//内蒙古
            else if (selectedCity === "liaoning_areadata") {
                var targetData = liaoning_areadata.filter(function(d) {
                    return d.year >= startYear && d.year <= endYear;
                });
                renderBarGroups(targetData, ['develop', 'sale']);
            }//辽宁
            else if (selectedCity === "jilin_areadata") {
                var targetData = jilin_areadata.filter(function(d) {
                    return d.year >= startYear && d.year <= endYear;
                });
                renderBarGroups(targetData, ['develop', 'sale']);
            }//吉林
            else if (selectedCity === "heilongjiang_areadata") {
                var targetData = heilongjiang_areadata.filter(function(d) {
                    return d.year >= startYear && d.year <= endYear;
                });
                renderBarGroups(targetData, ['develop', 'sale']);
            }//黑龙江
            else if (selectedCity === "shanghai_areadata") {
                var targetData = shanghai_areadata.filter(function(d) {
                    return d.year >= startYear && d.year <= endYear;
                });
                renderBarGroups(targetData, ['develop', 'sale']);
            }//上海
            else if (selectedCity === "jiangsu_areadata") {
                var targetData = jiangsu_areadata.filter(function(d) {
                    return d.year >= startYear && d.year <= endYear;
                });
                renderBarGroups(targetData, ['develop', 'sale']);
            }//江苏
            else if (selectedCity === "zhejiang_areadata") {
                var targetData = zhejiang_areadata.filter(function(d) {
                    return d.year >= startYear && d.year <= endYear;
                });
                renderBarGroups(targetData, ['develop', 'sale']);
            }//浙江
            else if (selectedCity === "anhui_areadata") {
                var targetData = anhui_areadata.filter(function(d) {
                    return d.year >= startYear && d.year <= endYear;
                });
                renderBarGroups(targetData, ['develop', 'sale']);
            }//安徽
            else if (selectedCity === "fujian_areadata") {
                var targetData = fujian_areadata.filter(function(d) {
                    return d.year >= startYear && d.year <= endYear;
                });
                renderBarGroups(targetData, ['develop', 'sale']);
            }//福建
            else if (selectedCity === "jiangxi_areadata") {
                var targetData = jiangxi_areadata.filter(function(d) {
                    return d.year >= startYear && d.year <= endYear;
                });
                renderBarGroups(targetData, ['develop', 'sale']);
            }//江西
            else if (selectedCity === "shandong_areadata") {
                var targetData = shandong_areadata.filter(function(d) {
                    return d.year >= startYear && d.year <= endYear;
                });
                renderBarGroups(targetData, ['develop', 'sale']);
            }//山东
            else if (selectedCity === "henan_areadata") {
                var targetData = henan_areadata.filter(function(d) {
                    return d.year >= startYear && d.year <= endYear;
                });
                renderBarGroups(targetData, ['develop', 'sale']);
            }//河南
            else if (selectedCity === "hubei_areadata") {
                var targetData = hubei_areadata.filter(function(d) {
                    return d.year >= startYear && d.year <= endYear;
                });
                renderBarGroups(targetData, ['develop', 'sale']);
            }//湖北
            else if (selectedCity === "hunan_areadata") {
                var targetData = hunan_areadata.filter(function(d) {
                    return d.year >= startYear && d.year <= endYear;
                });
                renderBarGroups(targetData, ['develop', 'sale']);
            }//湖南
            else if (selectedCity === "guangdong_areadata") {
                var targetData = guangdong_areadata.filter(function(d) {
                    return d.year >= startYear && d.year <= endYear;
                });
                renderBarGroups(targetData, ['develop', 'sale']);
            }//广东
            else if (selectedCity === "guangxi_areadata") {
                var targetData = guangxi_areadata.filter(function(d) {
                    return d.year >= startYear && d.year <= endYear;
                });
                renderBarGroups(targetData, ['develop', 'sale']);
            }//广西
            else if (selectedCity === "hainan_areadata") {
                var targetData = hainan_areadata.filter(function(d) {
                    return d.year >= startYear && d.year <= endYear;
                });
                renderBarGroups(targetData, ['develop', 'sale']); 
            }//海南
            else if (selectedCity === "chongqing_areadata") {
                var targetData = chongqing_areadata.filter(function(d) {
                    return d.year >= startYear && d.year <= endYear;
                });
                renderBarGroups(targetData, ['develop', 'sale']); 
            }//重庆
            else if (selectedCity === "sichuan_areadata") {
                var targetData = sichuan_areadata.filter(function(d) {
                    return d.year >= startYear && d.year <= endYear;
                });
                renderBarGroups(targetData, ['develop', 'sale']); 
            }//四川
            else if (selectedCity === "guizhou_areadata") {
                var targetData = guizhou_areadata.filter(function(d) {
                    return d.year >= startYear && d.year <= endYear;
                });
                renderBarGroups(targetData, ['develop', 'sale']);
            }//贵州
            else if (selectedCity === "yunnan_areadata") {
                var targetData = yunnan_areadata.filter(function(d) {
                    return d.year >= startYear && d.year <= endYear;
                });
                renderBarGroups(targetData, ['develop', 'sale']);
            }//云南
            else if (selectedCity === "xizang_areadata") {
                var targetData = xizang_areadata.filter(function(d) {
                    return d.year >= startYear && d.year <= endYear;
                });
                renderBarGroups(targetData, ['develop', 'sale']);
            }//西藏
            else if (selectedCity === "shan3xi_areadata") {
                var targetData = shan3xi_areadata.filter(function(d) {
                    return d.year >= startYear && d.year <= endYear;
                });
                renderBarGroups(targetData, ['develop', 'sale']);
            }//陕西
            else if (selectedCity === "gansu_areadata") {
                var targetData = gansu_areadata.filter(function(d) {
                    return d.year >= startYear && d.year <= endYear;
                });
                renderBarGroups(targetData, ['develop', 'sale']);
            }//甘肃
            else if (selectedCity === "qinghai_areadata") {
                var targetData = qinghai_areadata.filter(function(d) {
                    return d.year >= startYear && d.year <= endYear;
                });
                renderBarGroups(targetData, ['develop', 'sale']);
            }//青海
            else if (selectedCity === "ningxia_areadata") {
                var targetData = ningxia_areadata.filter(function(d) {
                    return d.year >= startYear && d.year <= endYear;
                });
                renderBarGroups(targetData, ['develop', 'sale']);
            }//宁夏
            else if (selectedCity === "xinjiang_areadata") {
                var targetData = xinjiang_areadata.filter(function(d) {
                    return d.year >= startYear && d.year <= endYear;
                });
                renderBarGroups(targetData, ['develop', 'sale']);
            }//新疆
            document.getElementById('checkbox-develop').checked=true;
            document.getElementById('checkbox-sale').checked=true;
            document.getElementById('checkbox-rate').checked=false;
        }
        
        var maxHeight = 220;
        var maxWidth = 1250;
        const margin_c4 = { top: 15, right: 20, bottom: 40, left: 360 };
        const colorArray=['#38CCCB', '#0074D9', '#2FCC40', '#FEDC00', '#FF4036', 'lightgrey'];

        //绘柱状图
        function renderBarGroups( data, keys=[]){
            if(currentGraph!=null){
                d3.select('#chart4').selectAll('svg').remove();
            }
            const getX = (d) => d.year;
            const key1 = keys[0] || '';
            const key2 = keys[1] || '';
            const key3 = keys[2] || '';
            const getY1 = (d) => d.develop;
            const getY2 = (d) => d.sale;
            const getY3 = (d) => d.rate;
            const scaleX = d3.scalePoint()
                .domain(data.map(getX))
                .range([0, maxWidth - margin_c4.left - margin_c4.right])
                .padding(0.6)
            const scaleY = d3.scaleLinear()
                .domain([0, d3.max(data, d => Math.max(getY1(d), getY2(d)))])
                .nice()
                .range([maxHeight - margin_c4.top - margin_c4.bottom, 0]);
            const scaleYrate = d3.scaleLinear()
                .domain([0, 100])
                .range([maxHeight - margin_c4.top - margin_c4.bottom, 0]);
            const svg = d3.select('#chart4')
                .append('svg')
                .attr('width', maxWidth)
                .attr('height', maxHeight)

            svg.selectAll("line.horizontalGrid").data(scaleY.ticks(5)).enter()
                .append("line")
                .attr("class", "horizontalGrid")
                .attr("x1", margin_c4.left)
                .attr("x2", maxWidth - margin_c4.right)
                .attr("y1", d => scaleY(d) + margin_c4.top)
                .attr("y2", d => scaleY(d) + margin_c4.top)
                .attr("stroke", "lightgray")
                .attr("stroke-width", "0.7px");
            
            const legendData=[
                    { label: 'develop', color: colorArray[0], chi: '房地产开发企业新开工房屋面积(万平方米)' },
                    { label: 'sale', color: colorArray[1], chi: '商品房销售面积(万平方米)' }
            ];

            //勾选框1
            document.getElementById('checkbox-develop')
            .addEventListener("change", function toggleBars() {
                var checkboxDevelop = document.getElementById('checkbox-develop');
                var checkboxSale = document.getElementById('checkbox-sale');
                d3.select('#chart4').selectAll('rect').remove();
                if (checkboxDevelop.checked && checkboxSale.checked) {
                    renderBars(getX, getY1, scaleX, scaleY, 15, 0, colorArray[0]);
                    renderBars(getX, getY2, scaleX, scaleY, 15, 15, colorArray[1]);
                } else if (checkboxDevelop.checked) {
                    renderBars(getX, getY1, scaleX, scaleY, 15, 0, colorArray[0]);
                } else if (checkboxSale.checked) {
                    renderBars(getX, getY2, scaleX, scaleY, 15, 0, colorArray[1]);
                }
                const legend = svg.append('g')
                .attr('transform', `translate(${maxWidth - margin_c4.right + 20}, 20)`);
                legend.selectAll(null)
                    .data(legendData)
                    .enter()
                    .append('rect')
                    .attr('x', -maxWidth + 40)
                    .attr('y', (d, i) => i * 20 + maxHeight - 75)
                    .attr('width', 12)
                    .attr('height', 12)
                    .style('fill', d => d.color);
            })
            //勾选框2
            document.getElementById('checkbox-sale')
            .addEventListener("change", function toggleBars() {
                var checkboxDevelop = document.getElementById('checkbox-develop');
                var checkboxSale = document.getElementById('checkbox-sale');
                d3.select('#chart4').selectAll('rect').remove();
                if (checkboxDevelop.checked && checkboxSale.checked) {
                    renderBars(getX, getY1, scaleX, scaleY, 15, 0, colorArray[0]);
                    renderBars(getX, getY2, scaleX, scaleY, 15, 15, colorArray[1]);
                } else if (checkboxDevelop.checked) {
                    renderBars(getX, getY1, scaleX, scaleY, 15, 0, colorArray[0]);
                } else if (checkboxSale.checked) {
                    renderBars(getX, getY2, scaleX, scaleY, 15, 0, colorArray[1]);
                }
                const legend = svg.append('g')
                .attr('transform', `translate(${maxWidth - margin_c4.right + 20}, 20)`);
                legend.selectAll(null)
                    .data(legendData)
                    .enter()
                    .append('rect')
                    .attr('x', -maxWidth + 40)
                    .attr('y', (d, i) => i * 20 + maxHeight - 75)
                    .attr('width', 12)
                    .attr('height', 12)
                    .style('fill', d => d.color);
            })
            //绘制折线
            document.getElementById('checkbox-rate')
            .addEventListener("change",function draw_rateline() {
                var drawline = document.getElementById("checkbox-rate");
                d3.select('#chart4').selectAll('.pathline_c4').remove();
                d3.select('#chart4').selectAll('.dot_c4').remove();
                d3.select('#chart4').selectAll('.labeldot_c4').remove();
                if(drawline.checked){
                    var line = d3.line()
                        .x(function(d) { return scaleX(d.year) + margin_c4.left; })
                        .y(function(d) { return scaleYrate(d.rate); });
                    svg.append("path")
                        .datum(data)
                        .attr('class',"pathline_c4")
                        .attr("fill", "none")
                        .attr("stroke", "grey")
                        .attr("stroke-linejoin", "round")
                        .attr("stroke-linecap", "round")
                        .attr("stroke-width", 2)
                        .attr("d", line);
                    svg.selectAll(".dot")
                        .data(data)
                        .enter().append("circle")
                        .attr("class", "dot_c4")
                        .attr("cx", function(d) { return scaleX(d.year) + margin_c4.left; })
                        .attr("cy", function(d) { return scaleYrate(d.rate); })
                        .attr("r", 0.8);
                    svg.selectAll(".text")
                        .data(data)
                        .enter().append("text")
                        .attr("class", "labeldot_c4")
                        .attr("x", function(d) { return scaleX(d.year) + margin_c4.left - 15; })
                        .attr("y", function(d) { return scaleYrate(d.rate) - 8; })
                        .text(function(d) { return d.rate; });
                }
                else { return; }
            })


            //柱形的绘制
            function renderBars(getX, getY, scaleX, scaleY, barWidth, offsetX, color) {
                const bars = svg.append('g').selectAll('rect')
                    .data(data)
                    .enter()
                    .append('rect')
                    .attr('x', (d) => margin_c4.left + scaleX(getX(d)) + offsetX - barWidth)
                    .attr('y', (d) => scaleY(0) + margin_c4.top)
                    .attr('width', barWidth)
                    .attr('height', 0)
                    .attr('fill', color)
                    .on('mouseover', function(event,d) {
                        d3.select(this).attr('fill', colorArray[5]);
                        const xPosition = margin_c4.left - 340;
                        const yPosition = maxHeight - margin_c4.bottom -95;
                        svg.append('text')
                            .attr('class', 'tooltip_c4')
                            .attr('x', xPosition)
                            .attr('y', yPosition)
                            .text(`年份: ${getX(d)}`);
                        var checkboxDevelop = document.getElementById('checkbox-develop');
                        var checkboxSale = document.getElementById('checkbox-sale');
                        var k = 1;
                        if (checkboxDevelop.checked && checkboxSale.checked) {
                                svg.append('text')
                                    .attr('class', 'tooltip_c4')
                                    .attr('x', xPosition)
                                    .attr('y', yPosition + 18*(k++))
                                    .text(`房地产开发企业新开工房屋面积: ${getY1(d)}`);
                                svg.append('text')
                                    .attr('class', 'tooltip_c4')
                                    .attr('x', xPosition)
                                    .attr('y', yPosition + 18*(k++))
                                    .text(`商品房销售面积: ${getY2(d)}`);
                        } else if (checkboxDevelop.checked) {
                                svg.append('text')
                                    .attr('class', 'tooltip_c4')
                                    .attr('x', xPosition)
                                    .attr('y', yPosition + 18*(k++))
                                    .text(`房地产开发企业新开工房屋面积: ${getY1(d)}`);
                        } else if (checkboxSale.checked) {
                                svg.append('text')
                                    .attr('class', 'tooltip_c4')
                                    .attr('x', xPosition)
                                    .attr('y', yPosition + 18*(k++))
                                    .text(`商品房销售面积: ${getY2(d)}`);
                        }
                    })
                    .on('mouseout', function() {
                        d3.select(this).attr('fill', color);
                        svg.selectAll('.tooltip_c4').remove();
                    })
                    .transition()
                    .delay((d, i) => i * 50)
                    .duration(1000)
                    .attr('y', (d) => scaleY(getY(d)) + margin_c4.top)
                    .attr('height', (d) => maxHeight - margin_c4.top - margin_c4.bottom - scaleY(getY(d)));
            }
            
            //坐标轴
            const axisBottom = d3.axisBottom(scaleX).tickSizeOuter(0);
            svg.append('g')
                .attr('transform', `translate(${margin_c4.left}, ${maxHeight - margin_c4.bottom})`)
                .call(axisBottom);
            scaleY.ticks(5).forEach(t => {
                svg.append('text')
                    .attr('x', margin_c4.left - 10)
                    .attr('y', scaleY(t) + margin_c4.top + 4)
                    .style('font-family','Arial')
                    .style('font-family','sans-serif')
                    .text(t)
                    .style('font-size', 10)
                    .style('text-anchor', 'end');
            });

            //图例
            const legend = svg.append('g')
                .attr('transform', `translate(${maxWidth - margin_c4.right + 20}, 20)`);
            //图例方块
            legend.selectAll(null)
                .data(legendData)
                .enter()
                .append('rect')
                .attr('x', -maxWidth + 40)
                .attr('y', (d, i) => i * 20 + maxHeight - 75)
                .attr('width', 12)
                .attr('height', 12)
                .style('fill', d => d.color);
            //图例文字
            legend.selectAll(null)
                .data(legendData)
                .enter()
                .append('text')
                .attr('x', -maxWidth + 58)
                .attr('y', (d, i) => i * 20 - 65 + maxHeight)
                .attr('font-size',13)
                .text(d => d.chi);

            renderBars(getX, getY1, scaleX, scaleY, 15, 0, colorArray[0]);
            renderBars(getX, getY2, scaleX, scaleY, 15, 15, colorArray[1]);
            currentGraph=svg;

        }

    </script>

</body>

</html>